import merge from 'merge-stream';            //- 合并流
import buffer from 'vinyl-buffer';           //- 缓存流
import pngquant from 'imagemin-pngquant';    //- 深度压缩png图片的imagemin插件

/**
 * 雪碧图合成
 * github：https://github.com/twolfson/gulp.spritesmith
 */
module.exports = (gulp, $, config) => {
    return () => {
    	// Generate our spritesheet
	    const spriteData = gulp.src('sprite/*.png').pipe($.spritesmith({
	        imgName: 'sprite.png',
	        cssName: 'sprite.css',
	        padding: 0,  // 每个图片的间距，默认为0px
	        cssTemplate: (data) => {
	            // data为对象，保存合成前小图和合成打大图的信息包括小图在大图之中的信息
	            let arr = [],
	                url =  data.spritesheet.image
	            // console.log(JSON.stringify(data));

	            //- [配置项]合成之前所有图片的宽高是否一致
	            const ALL_THE_SAME = true;

	            data.sprites.forEach((item, index) => {
	                if (!index) {
	                    arr.push(`
	                        .icon {
	                            display: inline-block;
	                            background-image: url(${url});
	                            background-repeat: no-repeat;
	                            ${ ALL_THE_SAME ? `width: ${item.px.width}; height: ${item.px.height};` : '' }
	                        }
	                    `)
	                }
	                arr.push(`
	                    .icon-${item.name} {
	                        background-position: ${item.px.offset_x} ${item.px.offset_y};
	                        ${ !ALL_THE_SAME ? `width: ${item.px.width}; height: ${item.px.height};` : '' }
	                    }
	                `)

	                // HTML：<i class="icon icon-xxx"></i>
	            })
	            return arr.join("")
	        }
	    }));

	    // Pipe image stream through image optimizer and onto disk
	    const imgStream = spriteData.img
	        .pipe(buffer())
	        .pipe($.imagemin({use: [pngquant()]}))
	        .pipe(gulp.dest('sprite/output/'));

	    // Pipe CSS stream through CSS optimizer and onto disk
	    const cssStream = spriteData.css
	        .pipe($.cleanCss({
	            format: {
	                breaks: {
	                    afterProperty: true,
	                    afterRuleBegins: true,
	                    afterRuleEnds: true
	                },
	                indentBy: 1,
	                indentWith: 'tab',
	                spaces: { // controls where to insert spaces
	                    aroundSelectorRelation: true, // controls if spaces come around selector relations; e.g. `div > a`; defaults to `false`
	                    beforeBlockBegins: true, // controls if a space comes before a block begins; e.g. `.block {`; defaults to `false`
	                    beforeValue: true // controls if a space comes before a value; e.g. `width: 1rem`; defaults to `false`
	                },
	            }
	        }))
	        .pipe(gulp.dest('sprite/output/'));

	    // Return a merged stream to handle both `end` events
	    return merge(imgStream, cssStream);
    };
};